From 620223f151700bbd91a33d32e2a4c29d4c287e9d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 6 Feb 2023 12:04:30 +0700
Subject: no message

---
 src/pages/my/transaction/[id].js | 127 +++++++++++++++++++++++++++++++++++----
 1 file changed, 116 insertions(+), 11 deletions(-)

(limited to 'src/pages/my/transaction/[id].js')

diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 428d71fb..d1ecbd7f 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -2,13 +2,12 @@ import AppBar from "@/components/layouts/AppBar";
 import Layout from "@/components/layouts/Layout";
 import LineDivider from "@/components/elements/LineDivider";
 import WithAuth from "@/components/auth/WithAuth";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import apiOdoo from "@/core/utils/apiOdoo";
 import { useRouter } from "next/router";
 import { useAuth } from "@/core/utils/auth";
 import VariantCard from "@/components/variants/VariantCard";
 import currencyFormat from "@/core/utils/currencyFormat";
-import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
 import { SkeletonList } from "@/components/elements/Skeleton";
@@ -16,6 +15,10 @@ import Link from "@/components/elements/Link";
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import Alert from "@/components/elements/Alert";
 import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";
+import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert";
+import { toast } from "react-hot-toast";
+import useBottomPopup from "@/lib/elements/hooks/useBottomPopup";
+import getFileBase64 from "@/core/utils/getFileBase64";
 
 export default function DetailTransaction() {
   const router = useRouter();
@@ -23,16 +26,94 @@ export default function DetailTransaction() {
   const [ auth ] = useAuth();
   const [ transaction, setTransaction ] = useState(null);
 
-  useEffect(() => {
+  const loadTransaction = useCallback(async () => {
     if (auth && id) {
-      const loadTransaction = async () => {
-        const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
-        setTransaction(dataTransaction);
-      }
-      loadTransaction();
+      const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
+      setTransaction(dataTransaction);
     }
   }, [ auth, id ]);
 
+  useEffect(() => {
+    loadTransaction();
+  }, [ loadTransaction ]);
+
+  const submitCancelTransaction = async (data) => {
+    const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`);
+    if (isCancelled) {
+      toast.success('Berhasil batalkan transaksi');
+      loadTransaction();
+    }
+  }
+
+  const {
+    openConfirmAlert,
+    ConfirmAlert
+  } = useConfirmAlert({
+    title: 'Batalkan Transaksi',
+    caption: 'Apakah anda yakin untuk membatalkan transaksi?',
+    closeText: 'Tidak',
+    submitText: 'Iya, batalkan',
+    onSubmit: submitCancelTransaction
+  });
+
+  const UploadPurchaseOrder = () => {
+    const nameRef = useRef('');
+    const fileRef = useRef('');
+
+    const submitUploadPurchaseOrder = async (e) => {
+      e.preventDefault();
+      const file = fileRef.current.files[0];
+      const name = nameRef.current.value;
+      if (file.size > 5000000) {
+        toast.error('Maksimal ukuran file adalah 5MB', {
+          position: 'bottom-center'
+        });
+        return;
+      }
+      const parameter = {
+        name,
+        file: await getFileBase64(file)
+      };
+      const isUploaded = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/upload_po`, parameter);
+      if (isUploaded) {
+        toast.success('Berhasil upload PO');
+        loadTransaction();
+        closePopup();
+      }
+    };
+
+    return (
+      <form className="flex flex-col gap-y-4" onSubmit={submitUploadPurchaseOrder}>
+        <div>
+          <label className="form-label mb-2">Nama PO</label>
+          <input className="form-input" type="text" ref={nameRef} required />
+        </div>
+        <div>
+          <label className="form-label mb-2">Dokumen PO</label>
+          <input className="form-input" type="file" ref={fileRef} required />
+        </div>
+        <button type="submit" className="btn-yellow w-full mt-2">Upload</button>
+      </form>
+    );
+  }
+
+  const {
+    closePopup,
+    BottomPopup,
+    openPopup
+  } = useBottomPopup({
+    title: 'Upload PO',
+    children: UploadPurchaseOrder
+  });
+
+  const downloadPurchaseOrder = () => {
+
+  };
+
+  const uploadPurchaseOrder = () => {
+    openPopup();
+  };
+
   return (
     <WithAuth>
       <Layout className="pb-4">
@@ -49,9 +130,6 @@ export default function DetailTransaction() {
               <DescriptionRow label="No Transaksi">
                 { transaction?.name }
               </DescriptionRow>
-              <DescriptionRow label="Purchase Order">
-                { transaction?.purchase_order_name || '-' }
-              </DescriptionRow>
               <DescriptionRow label="Ketentuan Pembayaran">
                 { transaction?.payment_term }
               </DescriptionRow>
@@ -65,6 +143,24 @@ export default function DetailTransaction() {
 
             <LineDivider />
 
+            <div className="p-4 flex flex-col gap-y-4">
+              <DescriptionRow label="Purchase Order">
+                { transaction?.purchase_order_name || '-' }
+              </DescriptionRow>
+              <div className="flex items-center">
+                <p className="text-gray_r-11 leading-none">Dokumen PO</p>
+                <button 
+                  type="button"
+                  className="btn-light py-1.5 px-3 ml-auto"
+                  onClick={transaction?.purchase_order_file ? downloadPurchaseOrder : uploadPurchaseOrder}
+                >
+                  { transaction?.purchase_order_file ? 'Download' : 'Upload' }
+                </button>
+              </div>
+            </div>
+
+            <LineDivider />
+
             <p className="h2 p-4">Detail Produk</p>
 
             <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
@@ -115,6 +211,13 @@ export default function DetailTransaction() {
                     Belum ada Invoice
                   </Alert>
                 ) }
+                <button 
+                  className="btn-light w-full mt-4" 
+                  disabled={transaction?.status != 'waiting'}
+                  onClick={() => openConfirmAlert(transaction)}
+                >
+                  Batalkan Transaksi
+                </button>
               </div>
             </div>
           </>
@@ -123,6 +226,8 @@ export default function DetailTransaction() {
             <SkeletonList number={12} />
           </div>
         ) }
+        { ConfirmAlert }
+        { BottomPopup }
       </Layout>
     </WithAuth>
   );
-- 
cgit v1.2.3